<template>
	<view class="newPartyWp">
		<view class="bgImg">
			<u-image src="https://file.casugn.com/storecompcard/temp/组局bg@2x_1682302473174.png" width="750rpx"
				height="500rpx"></u-image>
		</view>
		<u-status-bar></u-status-bar>
		<!-- 自定义导航 -->
		<u-navbar @leftClick="goBackHome" leftIconColor="#ffffff" title="组局详情" bgColor="transparent"
			:titleStyle="{color:'#ffffff'}">
			<view class="u-nav-slot" slot="left">
				<view>
					<u-icon name="arrow-left" size="40" color="#ffffff"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="headWP">
			<view class="partyItemMain">
				<view class="infoItem">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard//8QgtIUYatKvS354eadb67fdb51a33385a045dbd14498_1682221541636.png"><template
							v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template></u-image>
					<view class="infoName u-line-1">{{partyInfo.addressName?partyInfo.addressName:''}}</view>
				</view>
				<view class="infoItem">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/temp/general／schedule@2x_1682221611794.png"><template
							v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template></u-image>
					<view class="infoName u-line-1">{{partyInfo.startTime?partyInfo.startTime:''}}</view>
				</view>
				<view class="infoItem">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/temp/general／user@2x_1682221627572.png"><template
							v-slot:loading>
							<u-loading-icon></u-loading-icon>
						</template></u-image>
					<view style="color:#276AEE ;" class="infoName">{{partyInfo.initiator?partyInfo.initiator:""}}
					</view>
				</view>
			</view>
			<view class="paddingBar">
			</view>
			<!-- 参与人员 -->
			<view class="memberWp">
				<view class="memberItemTitleWp">
					<view class="memberItemTitle">
						参与人员
					</view>
					<view class="memberItemNumber">
						{{maxCount }}人
					</view>
				</view>
				<view class="memberItem" v-for="(item,index) in membersList" :key="index">
					<view class="left">
						<u-image width="80rpx" height="80rpx" :src="item.photo?item.photo:defaultHead" alt="">
						</u-image>
						<view class="userNameWp">
							<view class="userName">
								{{item.userName?item.userName:''}}
							</view>
							<view class="phone">
								{{item.mobile?item.mobile:''}}
							</view>
						</view>

					</view>
					<view class="right" style="margin-right: 30rpx;">
					</view>
				</view>
			</view>
			<view class="paddingBar">
			</view>
			<!-- 备注 -->
			<view class="remarkWp">
				<view class="title">
					备注
				</view>
				<view class="content">
					{{partyInfo.remark?partyInfo.remark:''}}
				</view>
			</view>



		</view>

	</view>
</template>
<script>
	import baseConfig from '@/config/baseUrl.js'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		defaultHead
	} from '@/config/staticConfig.js'
	export default {
		components: {},
		data() {
			return {
				defaultHead,
				showMoreListPopup: false,
				partyInfo: {
					startTime: '',
					address: '',
					remark: '',
					title: '',
				},
				initiatorId: '',
				initiator: '',
				openId: '',
				showPicker: false,
				maxCount: 0,
				membersList: [],
				guestInfoByChildren: {}, //子组件上传的宾客信息
				showNoticeDlg: false,
				partyItemInfo: {},
				showBtnWp: null, //是否显示控制按钮

			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中'
			})
			wx.hideShareMenu()
			console.log(opt);

			if (opt.id) {
				let {
					id,
					openId //参与者openId
				} = opt
				this.queryPartyInfo(id, openId)
			}
		},
		methods: {

			goBackHome() {
				const pageNum = getCurrentPages()
				if (pageNum.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/card/card'
					})
				}
			},
			// 根据id 查询组局信息
			async queryPartyInfo(groupId, openId = this.userInfo.openId) {
				const {
					code,
					result
				} = await this.$api.queryGroupDetails({
					groupId,
					openId
				})
				if (code == 200 && result != null) {
					console.log('根据id 查询组局信息', result);
					this.partyInfo = Object.assign({}, result)
					this.addressToShow = result.addressName
					this.maxCount = result.membersList.length
					let positionAngle = 360 / result.membersList.length
					let arr = result.membersList.map((item, index) => {
						item.friendOpenId = item.openId
						item.name = item.userName
						item.head = item.photo ? item.photo : this.defaultHead
						item.ui_position = this.getAxis(positionAngle * index)
						return item
					})

					this.membersList = JSON.parse(JSON.stringify(arr))
					//展示列表删除 发起人
					// this.membersListForShowInfo = arr.filter(item => {
					// 	return item.openId != this.partyInfo.initiatorId
					// })
				} else {
					uni.showToast({
						title: res.message,
						icon: 'error'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 500)

					console.log('获取组局信息失败', result);
				}
			},
			initPerson() {
				//不变
				if (this.maxCount == this.membersList.length) return
				// 增加
				if (this.maxCount > this.membersList.length) {
					for (let i = this.membersList.length; i < this.maxCount; i++) {
						// this.membersList.push(this.placeHolderUserObj)
						this.membersList.splice(i, 0, this.placeHolderUserObj)
					}
				}
				// 删除
				else if (this.maxCount < this.membersList.length) {
					// 循环一遍删除空位
					for (let i = this.membersList.length - 1; i > 0; i--) {
						if (this.membersList.length === this.maxCount) break
						if (this.membersList[i].friendOpenId) continue
						this.membersList.splice(i, 1)
					}
					// 如果人还多着,则从后向前删除
					for (let i = this.membersList.length - 1; i > 0; i--) {
						if (this.membersList.length === this.maxCount) {
							break
						}
						this.membersList.splice(i, 1)
					}
				}
				//重新计算角度
				let positionAngle = 360 / this.maxCount
				let arr = JSON.parse(JSON.stringify(this.membersList))
				arr.forEach((item, index) => {
					item.ui_position = this.getAxis(index * positionAngle)
				})
				this.membersList = arr
			},
			getAxis(angle) {
				// 公式，r-半径，angle-角度
				// x: r+r*Math.sin(angle*Math.PI/180)
				// y: r-r*Math.cos(angle*Math.PI/180)
				return `translate(${200*Math.sin(angle*Math.PI/180)+200}rpx, ${200-200*Math.cos(angle*Math.PI/180)}rpx)`
			},
			//更改人员数据
			setPartyPersonList({
				index,
				data
			}) {
				this.membersList.splice(index, 1, data)
			},
			//显示通知弹窗
			showDlg(item) {
				console.log(item, 'item');
				this.partyItemInfo = item
				this.showNoticeDlg = true
			},
			// 发送短信
			handleSendSms() {
				wx.sendSms({
					phoneNumber: '',
					content: `${this.partyInfo.initiator?this.partyInfo.initiator:''}邀请您参加${this.partyInfo.title?this.partyInfo.title:'组局'},开始时间是${this.partyInfo.startTime?this.partyInfo.startTime:''},地点位于${this.partyInfo.address.address?this.partyInfo.address.address:''}${this.partyInfo.address.name?this.partyInfo.address.name:''}。`,

				})
				this.showNoticeDlg = false
			},
			//微信分享 
			handleSendWx() {
				console.log(this.partyItemInfo, 'this.partyItemInfo');

			},
			showReason(item) {
				console.log(item, 'item');
			},
			//拨打电话
			async handleCall() {
				console.log(this.partyItemInfo, 'this.partyItemInfo');
				if (this.partyItemInfo.openId) {
					//查询电话 拨打
					let res = await this.$api.queryCurrentCardByOpenId({
						openId: this.partyItemInfo.openId
					})
					if (res.success && res.result.id) {
						console.log(res.result, '通过自己的openId查询名片信息');
						let {
							mobile
						} = res.result
						uni.makePhoneCall({
							phoneNumber: String(mobile)
						})
						this.showNoticeDlg = false
					} else {
						uni.showToast({
							title: '宾客未创建名片或未设置电话',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '宾客未创建名片或未设置电话',
						icon: 'none'
					});
				}

			}


		},

	}
</script>

<style lang="scss" scoped>
	.newPartyWp {
		min-height: 100vh;
		position: relative;
		padding-top: 1rpx;
		padding-bottom: 50rpx;

		.paddingBar {
			width: 100%;
			height: 30rpx;
			margin: 30rpx 0;
			background-color: #F7F8FA;
		}

		.bgImg {
			width: 750rpx;
			height: 500rpx;
			position: absolute;
			top: -45rpx;
			left: 0;
			z-index: -1;
			clear: both;
		}

		.headWP {
			background-color: #fff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: 200rpx;
			padding-top: 60rpx;

			.partyItemMain {
				margin: 0 30rpx;

				.infoItem {
					display: flex;
					align-items: center;
					margin-top: 16rpx;
					width: 100%;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;

					.infoName {
						margin-left: 16rpx;
					}

				}
			}

			.memberWp {
				margin: 0 30rpx;

				.memberItemTitleWp {
					display: flex;
					justify-content: space-between;

					.memberItemTitle {
						flex: 1;
						height: 96rpx;
						font-size: 30rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 96rpx;
					}

					.memberItemNumber {
						text-align: center;
						width: 100rpx;
						height: 96rpx;
						font-size: 28rpx;
						color: #86909C;
						line-height: 96rpx;

					}


				}



				.memberItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30upx 0;
					background: #FFFFFF;
					border-bottom: 1rpx solid #eee;

					.left {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 438rpx;

						.userNameWp {
							margin-left: 30rpx;
							width: 440rpx;
							height: 96rpx;

							.userName {
								height: 44rpx;
								font-size: 30rpx;
								font-weight: 600;
								color: #1D2129;
								line-height: 45rpx;

								.type1 {
									margin-left: 30rpx;
									display: inline-block;
									text-align: center;
									width: 88rpx;
									height: 36rpx;
									background: #FFECE8;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									font-size: 22rpx;
									font-weight: 400;
									color: #F53F3F;
									line-height: 36rpx;

								}

								.type2 {
									margin-left: 30rpx;
									display: inline-block;
									text-align: center;
									width: 88rpx;
									height: 36rpx;
									background: #E8FFEA;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #00B42A;
									line-height: 36rpx;

								}

							}

							.phone {
								margin-top: 16rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #86909C;
								line-height: 39rpx;

							}
						}

					}

					.right {

						.text {
							text-align: center;
							width: 120rpx;
							height: 56rpx;
							background: #E9F0FD;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-size: 28rpx;
							color: #276AEE;
							line-height: 56rpx;
						}


					}

				}

			}

			.remarkWp {
				margin: 0 30rpx;

				.title {
					height: 96rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 96rpx;
				}

				.content {
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;
				}
			}


			.submitBtnWp {
				display: flex;
				justify-content: space-between;
				margin: 30upx;

				.submitBtn {
					margin: 30upx;
					flex: 1;
				}
			}


		}

		//弹窗
		.noticeWp {
			margin: 30rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.wxshare {
				position: relative;
			}

			.wxshareBtn {
				width: 110rpx;
				height: 110rpx;
				top: 53rpx;
				left: 70rpx;
				position: absolute;
				opacity: 0;
			}

			.noticeItem {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 200rpx;
				flex: 1;

				.text {
					margin-top: 10rpx;
					text-align: center;
					font-size: 24upx;
					font-weight: 600;
					color: #333333;
				}
			}
		}
	}
</style>